﻿@page "/bar/bar1"
@attribute [RouteName("高度(km)与气温(°C)变化关系")]
@using Blazor.ECharts.Options
@using Blazor.ECharts.Options.Enum
@using B = Blazor.ECharts.Options.Series.Bar

<div class="chart-container">
    <EBar Option="Option1" Class="chart-fill" EventTypes="EventTypes" OnEventCallback="OnEchartsEvent"></EBar>

    @if (callbackArgs != null)
    {
        <div>
            <p>事件回调类型: @callbackArgs.EventType</p>
            <p>事件回调参数: </p>
            <p>@((MarkupString)callbackArgs.ToString().Replace(";", ";<br/>"))</p>
        </div>
    }
</div>

@code {
    private EChartsOption<B.Bar> Option1;

    private EchartsEventArgs callbackArgs;

    // 添加事件
    private List<EventType> EventTypes = new List<EventType> { EventType.click, EventType.brush, EventType.brushselected };

    protected override async Task OnInitializedAsync()
    {
        await Task.Delay(200);
        Option1 = new()
            {
                Color = new[] { "#8EC9EB" },
                Legend = new() { Data = "高度(km)与气温(°C)变化关系" },
                Tooltip = new()
                {
                    Trigger = TooltipTrigger.Axis,
                    Formatter = "Temperature : <br/>{b}km : {c}°C"
                },
                Grid = new()
                {
                    new() { Left = "3%", Right = "4%", Bottom = "3%", ContainLabel = true }
                },
                XAxis = new()
                {
                    new() { Type = AxisType.Value, SplitLine = new SplitLine() { Show = false }, AxisLabel = new AxisLabel() { Formatter = "{value} °C" } }
                },
                YAxis = new()
                {
                    new() { Type = AxisType.Category, AxisLine = new AxisLine() { OnZero = false }, AxisLabel = new AxisLabel() { Formatter = "{value} km" }, BoundaryGap = true, Data = new[] { "0", "10", "20", "30", "40", "50", "60", "70", "80" } }
                },
                Series = new()
                {
                    new B.Bar()
                    {
                        Name = "高度(km)与气温(°C)变化关系",
                        Smooth = true,
                        BarCategoryGap = 25,
                        LineStyle = new { normal = new { width = 3, shadowColor = "rgba(0,0,0,0.4)", shadowBlur = 10, shadowOffsetY = 10 } },
                        Data = new[] { 15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5 }
                    }
                },
                Graphic = new()
                {
                    new GraphicImage()
                    {
                        Id = "logo",
                        Right = 20,
                        Top = 20,
                        Z = -10,
                        Bounding = "raw",
                        Style = new()
                        {
                            Image = "http://echarts.baidu.com/images/favicon.png",
                            Width = 150,
                            Height = 150,
                            Opacity = 0.4
                        }
                    },
                    new GraphicGroup()
                    {
                        Rotation = Math.PI / 4,
                        Bounding = "raw",
                        Right = 110,
                        Bottom = 110,
                        Z = 100,
                        Children = new()
                        {
                            new
                            {
                                type = "rect",
                                left = "center",
                                top = "center",
                                z = 100,
                                shape = new
                                {
                                    width = 400,
                                    height = 50
                                },
                                style = new
                                {
                                    fill = "rgba(0,0,0,0.3)"
                                }
                            },
                            new
                            {
                                type = "text",
                                left = "center",
                                top = "center",
                                z = 100,
                                style = new
                                {
                                    fill = "#fff",
                                    text = "ECHARTS BAR CHART",
                                    font = "bold 26px Microsoft YaHei"
                                }
                            }
                        }
                    },
                    new GraphicGroup()
                    {
                        Left = "10%",
                        Top = "center",
                        Children = new()
                        {
                            new
                            {
                                type = "rect",
                                z = 100,
                                left = "center",
                                top = "middle",
                                shape = new
                                {
                                    width = 190,
                                    height = 90
                                },
                                style = new
                                {
                                    fill = "#fff",
                                    stroke = "#555",
                                    lineWidth = 2,
                                    shadowBlur = 8,
                                    shadowOffsetX = 3,
                                    shadowOffsetY = 3,
                                    shadowColor = "rgba(0,0,0,0.3)"
                                }
                            },
                            new
                            {
                                type = "text",
                                z = 100,
                                left = "center",
                                top = "middle",
                                style = new
                                {
                                    fill = "#333",
                                    text = string.Join("\n", new[]{
                                    "横轴表示温度，单位是°C",
                                    "纵轴表示高度，单位是km",
                                    "右上角有一个图片做的水印",
                                    "这个文本块可以放在图中各",
                                    "种位置"
                                }),
                                    font = "14px Microsoft YaHei"
                                }
                            }
                        }
                    }
                },
                Brush = new()
                {
                    XAxisIndex = "all",
                    ThrottleType = "debounce",
                    ThrottleDelay = 600
                }
            };

        await base.OnInitializedAsync();
    }

    private void OnEchartsEvent(EchartsEventArgs args)
    {
        callbackArgs = args;
    }
}